<template>
  <el-dialog
    v-model="open"
    append-to-body
    title="上传"
    class="up-load-file"
  >
    <el-upload
      ref="upload"
      :limit="1"
      accept=".xlsx,.xls"
      :headers="upload.headers"
      :action="upload.url + '?updateSupport=' + upload.updateSupport"
      :disabled="upload.isUploading"
      :on-progress="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :auto-upload="false"
      :on-error="handleFileError"
      drag
      :name="name"
      :data="data"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        将文件拖入此处,或
        <em>点击上传</em>
      </div>
      <template v-if="templateUrl" #tip>
        <div
        
          class="el-upload__tip"
          style="color: red;"
        >
          提示:仅允许导入"xls"或"xlsx"格式文件!
          <el-link type="info" style="font-size: 12px;" @click="importTemplate">下载模板</el-link>
        </div>
      </template>
    </el-upload>
    <template #footer>
      <div>
        <el-button type="primary" :loading="upload.isUploading" @click="submitFileForm()">确定</el-button>
        <el-button @click="open = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, defineProps, reactive, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import { getToken, getTokenType } from '@/utils/auth'

const tokenType = getTokenType()
const emit = defineEmits(['getList'])
const open = ref(false),
  title = ref(null)
const props = defineProps({
    getList: {
      type: Function,
      default: () => {},
    },
    templateUrl: {
      default: '',
    },
    importUrl: {
      default: '',
    },
    exportName: {
      default: '',
    },
    name: {
      default: 'file',
    },
    data: {
      default: () => ({}),
    },
  }),
  upload = reactive({
    isUploading: false,
    updateSupport: 0,
    headers: { Authorization: `${ tokenType }${ getToken() }` },
    url: import.meta.env.VITE_BASE_API + props.importUrl,
  }),
  {
    appContext: {
      config: {
        globalProperties: { $download },
      },
    },
  } = getCurrentInstance()
const initData = () => {
  upload.url = import.meta.env.VITE_BASE_API + props.importUrl
}
const handleFileUploadProgress = () => {
  upload.isUploading = true
}
const { proxy } = getCurrentInstance() as any
const handleFileSuccess = (res) => {
  open.value = false
  upload.isUploading = false
  proxy.$refs.upload.clearFiles()
  ElMessageBox.alert(res.msg, '导入结果', { dangerouslyUseHTMLString: true })
  emit('getList')
  open.value = false
}
// 模板导出
const importTemplate = () => {
  $download(props.templateUrl, {}, `${ props.exportName }_${ new Date().getTime() }.xlsx`)
}
const handleFileError = () => {
  proxy.upload.isUploading = false
  proxy.$refs.upload.clearFiles()
  proxy.$alert('异常导入')
}
const submitFileForm = () => {
  proxy.$refs.upload.submit()
}
// watch(importUrl=>{
//  handler() {
//          initData();
//       },
// 	  immediate: true,
// })
defineExpose({
  open,
  title,
})
</script>
<style lang="less" scoped>
.up-load-file {
  min-width: 50px;
}
</style>
